<template>
  <div class="container">
    <div class="info_box">
      <el-descriptions title="基础信息" :column="1">
        <el-descriptions-item label="案例名称">{{
          caseDetail.name
        }}</el-descriptions-item>
        <el-descriptions-item label="配置方式">
          <dict-tag
            :options="dict.type.plant_setting_type"
            :value="caseDetail.plantSettingType"
          />
        </el-descriptions-item>
        <el-descriptions-item label="描述">{{
          caseDetail.description
        }}</el-descriptions-item>
      </el-descriptions>

      <div style="">
        <el-divider></el-divider>
        <span class="info_title">图片展示</span>
        <el-row :gutter="20">
          <el-col
            :xs="12"
            :sm="12"
            :md="6"
            :lg="6"
            class="img_wraper"
            v-for="item in imgList"
            :key="item.id"
          >
            <div style="width: 100%; height: 300px;border: 1px solid #f1f2f3;">
              <el-image
                style="width: 100%; height: 220px"
                fit="contain"
                :src="item.url"
                :preview-src-list="imgList.map(_ => _.url)"
              />
              <div>{{ item.description }}</div>
              <div style="height: 25px">
                <dict-tag
                  :options="dict.type.plant_setting_type"
                  :value="item.plantSettingType"
                />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
      <div>
        <span class="info_title">视频素材</span>
        <el-row :gutter="20">
          <el-col
            :xs="12"
            :sm="12"
            :md="6"
            :lg="6"
            class="img_wraper"
            v-for="item in videoList"
            :key="item.id"
          >
            <div style="width: 100%; height: 220px">
              <MuiPlayer
                :src="imgUrl + item.name"
                :title="item.originalFilename"
              />
              <div>{{ item.description }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getCaseDetail } from "@/api/basecase.js";
const imageTag = ["png", "jpg", "jpeg"];
const videoTag = [
  "m3u8",
  "mp4",
  "wmv",
  "mov",
  "mpg",
  "rmvb",
  "avi",
  "dat",
  "flv"
];
export default {
  name: "CaseDetail",
  dicts: ["plant_setting_type"],
  data() {
    return {
      imageTag,
      videoTag,
      caseId: "",
      caseDetail: {},
      imgList: [],
      previewImgList: [],
      videoList: []
    };
  },
  created() {
    this.caseId = this.$route.query.caseid;
    this.getCaseDetail(this.$route.query.caseid);
  },
  activated() {},
  computed: {
    imgUrl() {
      return process.env.VUE_APP_IP || "";
    }
  },
  methods: {
    async getCaseDetail(id) {
      const res = await getCaseDetail(id);
      // console.log(res)
      this.caseDetail = res.data;
      res.data.fileList.map(item => {
        if (this.imageTag.includes(item.suffix.toLowerCase())) {
          this.imgList.push(item);
          this.previewImgList.push(this.imgUrl + item.name);
        } else if (this.videoTag.includes(item.suffix.toLowerCase())) {
          this.videoList.push(item);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 200px);
  background-color: #fff;
  padding: 20px;
}
.info_box {
  width: 80%;
  margin: auto;
}
.info_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.img_wraper {
  padding: 5px;
  height: 100%;
}
</style>
